<!--客服聊天-->
<template>
  <div class="weal">
    <div id="chart-container">
            <div class="chart-user-list" id="chart-user-list">
                <div id="userinfo" class="user-item">
                    <img src="../assets/8424.png" alt="">
                    用户名
                </div>
                <div id="userlist" class="user-item">
                    <!--存用户列表-->
                </div>
            </div>
            <div class="chart-main-area">
                <div class="chart-main-title">
                    <h1>客户聊天室<span id="currentUser"></span></h1>
                </div>
                <div id="wordUl" class="myword">
                    <ul class="chart-list word_ul" id="word_ul">
                        <!-- 这里添加聊天记录 -->
                    </ul>
                </div>
                <div class="chart-form">
                    <div>
                        <textarea class="chart-form-message" id="message" v-model="val">
                        </textarea>
                    </div>
                    <div>
                        <input type="button" id="send" class="chart-form-send" value="发送" @click="sendinput">
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            val:"",
            userval:"dingding",
        }
    },
    sockets:{
        wealSend(data){
            console.log(data)
            // 把data显示在聊天记录列表的末尾
            if(data.username===this.$store.state.ausername){
                //自己的消息
                let myright=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
               <li class="word_right_li clearfloat">
                    <img class="right_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_right_d">
                        <p>${data.username}</p>
                        <p>${data.msg}</p>
                    </div>
                </li>`;
                myright.appendChild(div)
            }else{
                //别人的消息
                let otherleft=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
                <li class="word_left_li clearfloat">
                    <img class="left_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_left_d">
                        <p>${data.username}</p>
                        <p>${data.msg}</p>
                    </div>
                </li>`;
                otherleft.appendChild(div)
            // 修改用户信息
                var userlist=document.getElementById("userlist")
                userlist.innerHTML = `
                <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
                ${data.username}`
                
            }
            // 使滚动条一直在底部
            let wordUl=document.getElementById("wordUl")
            wordUl.scrollTop = wordUl.scrollHeight;
        }
    },
    methods: {
        sendinput(){
            if(this.val.trim()!==""){
                this.$socket.emit('sendserver',{
                    msg:this.val,
                    username:this.$store.state.ausername,
                    to:"dingding"
                });
                this.val='';
                message.focus();  //输入完后继续获得焦点
            }
        }
    },
    mounted() {
        //别人的消息
        var userval=localStorage.getItem(this.userval)
        if(userval){
            userval=userval.split(',')
            for(var i=0;i<userval.length;i++){
                let otherleft=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
                <li class="word_left_li clearfloat">
                    <img class="left_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_left_d">
                        <p>${this.userval}</p>
                        <p>${userval[i]}</p>
                    </div>
                </li>`;
                otherleft.appendChild(div)
            // 修改用户信息
                var userlist=document.getElementById("userlist")
                userlist.innerHTML = `
                <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
                ${this.userval}`

            }
        }
        //自己的消息
        var usernameval=localStorage.getItem(this.$store.state.ausername)
        if(usernameval){
            usernameval=usernameval.split(',')
            for(var i=0;i<usernameval.length;i++){
                let myright=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
                <li class="word_right_li clearfloat">
                    <img class="right_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_right_d">
                        <p>${this.$store.state.ausername}</p>
                        <p>${usernameval[i]}</p>
                    </div>
                </li>`;
                myright.appendChild(div)
            }
        }
    },
    
}
</script>

<style>
.weal #chart-container{
    width:1060px;
    height: 500px;
    border:1px solid #ccc;
}
.weal #chart-container .chart-user-list{
    float:left;
    width:260px;
    height: 500px;
    background-color: #EAE8E7;
}
.weal #chart-container .chart-user-list .user-item{
    padding:10px;
    border-bottom:1px solid #cccc;
}
.weal #chart-container .chart-user-list .user-item img{
    margin-right: 5px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    vertical-align: middle;
}
.weal #chart-container .chart-main-area{
    float:left;
    width:780px;
    height: 500px;
    background-color: #F5F5F5;
}
.weal #chart-container .chart-main-area .chart-main-title{
    height: 60px;
    border-bottom:1px solid #cccc;
}
.weal #chart-container .chart-main-area .chart-main-title h1{
    margin-left:20px;
    line-height: 60px;
    font-size:18px;
}

.weal .myword{
    float: left;
    width: 780px;
    height: 300px;
    overflow-y: scroll;
}
.weal .myword .word_left_li{
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}
.weal .myword .word_right_li{
    width: 98%;
    margin: 20px 20px 20px 0;
}

.weal .myword .left_img{
    float: left;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-left: 20px;
}

.weal .myword .right_img{
    float: right;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.weal .myword .word_left_d{
    margin-left: 1%;
    float: left;
    max-width: 63%;
    margin-top: 15px;
}
.weal .myword .word_right_d{
    margin-right: 1%;
    float: right;
    max-width: 63%;
    margin-top: 15px;
}

.weal .myword .word_left_d >:first-child{
    font-size: 6px;
    position: absolute;
    top:2px;
}
.weal .myword .word_left_d >:last-child{
    font-size: 16px;
    position: absolute;
    top: 20px;
    border: 1px solid rgb(231, 224, 224);
    border-radius: 5px;
    padding: 5px;
    line-height: 1.5em;
}
.weal .myword .word_right_d >:first-child{
    font-size: 6px;
    text-align: right;
    position: relative;
    top: -20px;
}
.weal .myword .word_right_d >:last-child{
    font-size: 16px;
    line-height: 1.5em;
    position: relative;
    top: -12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

.weal .myword .word_left_d >:last-child::before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-right-color: rgb(87, 84, 84);
    left: -11px;
    top:6px;
}
.weal .myword .word_left_d >:last-child::after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-right-color: #fff;
    left: -11px;
    top:6px;
}
.weal .myword .word_right_d >:last-child::before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-left-color: rgb(87, 84, 84);
    right: -11px;
    top:6px;
}
.weal .myword .word_right_d >:last-child::after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-left-color: #fff;
    right: -11px;
    top:6px;
}
/*清除浮动*/
.clearfloat::after{
    content:"\200B";
    display:block;
    height: 0;
    clear: both;
}
.clearfloat{
    *zoom: 1;
}

.weal #chart-container .chart-form{
    float: left;
    width: 780px;
    height: 140px;
    background: #ffffff;
    position: relative;
}
.weal #chart-container .chart-form .chart-form-message{
    position: absolute;
    width: 680px;
    height: 110px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    resize: none;
    cursor: pointer;
}

.weal #chart-container .chart-form .chart-form-send{
    position: absolute;
    width: 70px;
    height: 24px;
    background-color: #F5F5F5;
    color: #606060;
    border: 1px solid #ccc;
    bottom: 5px;
    right: 20px;
}

</style>
